<template>
  <div class="biaogejiatankuang">
    <el-table
      :data="tableData"
      header-align="center"
      class="customer-table"
      height="table"
      empty-text="暂无数据"
    >
      <el-table-column align="center" prop="name" label="姓名">
      </el-table-column>
      <el-table-column align="center" label="性别">
        <template slot-scope="scope">
          <div>
            {{ scope.row.sex == 0 ? "男" : "女" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="phone" label="联系方式">
      </el-table-column>
      <el-table-column align="center" prop="duties" label="职位">
      </el-table-column>
      <el-table-column align="center" label="任职时间">
        <template slot-scope="scope">
          <div>
            {{ timezhuanhuan1(scope.row.periodOfService) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope" align="center">
          <div @click="chakantanchucheng(scope.row)" class="caozuoshoubiao">
            查看照片
          </div>
        </template></el-table-column
      ></el-table
    >
    <!-- 点击查看的弹出层 -->

    <el-dialog title="提示" :visible.sync="chakanzhanshi" width="50%" center>
      <div>
        <img class="ganbuImg"
          v-for="(item, index) in images"
          :src="item"
          :key="index"
          id="contract_url"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="chakanzhanshi = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
var { timezhuanhuan1 } = require("../../js/global");
import tupian from "../../components/images";
export default {
  props: ["biaogeqingqiucanshu", "fenyexinxi"],
  data() {
    return {
      tableData: [],
      // 点击查看应有的数据
      chakanzhanshi: false,
      images: [],
    };
  },
  methods: {
    gengxin() {
      //更新表格
      this.huoqushuju();
    },
    huoqushuju() {
      let params = new URLSearchParams();
      params.append("page", this.fenyexinxi.currentPage);
      params.append("size", this.fenyexinxi.pagesize);
      params.append("villageId", this.biaogeqingqiucanshu.selectcun);
      params.append("townId", this.biaogeqingqiucanshu.selectzhen);
      this.$axios
        .post("/leader/village/villagecarde", params)
        .then((response) => {
          this.tableData = response.data.data.data.records;
          // 设置数据total
          this.$emit("setfenyetotal", response.data.data.data.total);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 表格操作中的弹出层展示
    chakantanchucheng(row) {
      let image = JSON.parse(row.image);
      image.forEach((item, index) => {
        this.images[index] = item.url;
      });
      this.chakanzhanshi = true;
    },
    timezhuanhuan1: timezhuanhuan1,
  },
  created() {},
  components: {
  },
};
</script>

<style lang="less" scoped>
.biaogejiatankuang {
  height: 100%;
}
.el-table {
  height: 100%;
}
.ganbuImg{
  width: 25%;
  margin: 0px 35%;
}
</style>